<template>
	<view>
		<view class="swiperWrapper">
			<u-swiper height="100%" :list="imglists" indicator indicatorMode="dot"></u-swiper>
		</view>

		<view class="carInfoWrapper">
			<view class="carBrand">
				{{carInfo.modelInfo}}
			</view>

			<view class="configWrapper">
				<view class="configItem">
					<text class="title">排挡:</text>
					<text class="content">{{carInfo.speedChangingBox|filterNull}}</text>
				</view>
				<view class="configItem">
					<text class="title">座位:</text>
					<text class="content">{{carInfo.seating|filterNull}}</text>
				</view>
				<view class="configItem">
					<text class="title">排量:</text>
					<text class="content">{{carInfo.displacement|filterNull}}</text>
				</view>
				<view class="configItem">
					<text class="title">年限:</text>
					<text class="content">{{carInfo.year|filterNull}}</text>
				</view>
			</view>

			<view class="labelWrapper">
				<text class="label" v-for="(label, index) in carInfo.labels" :key='index'>{{label}}</text>
			</view>
		</view>

		<view class="basicTitle">
			车辆基本配置
		</view>
		<view class="basicInfoWrapper">
			<!-- 根据后台维护字段显示根据后台维护字段显示根据后台维 护字段显示根据后台维护字段显示根据后台维护 -->
			<view v-for="(item,index) in carInfo.modelConfigList" :key="index">
				<text>{{item.configName}}</text>
			</view>


		</view>

		<view class="bottomWrapper">
			<view class="bookBtn" @click.stop="goConfimOrder">立即预订</view>
		</view>

		<u-modal title="提示" content="您的账号暂未认证,是否去认证?" :show="showAuthCerAlert" showCancelButton
			@confirm="confirmAuthCer" @cancel="showAuthCerAlert = false">
		</u-modal>

	</view>
</template>

<script>
	import {
		longPlanModelInfo,
	} from '@/api/longOrder-api.js'
	import setting from '@/settings.js'
	export default {
		data() {
			return {
				baseUrl: setting.baseImageUrl,
				showAuthCerAlert: false,
				imglists: [],
				planId: '',
				carInfo: {},
				carUrl: ''
			}
		},
		computed: {
			isLogin() {
				return this.$store.state.user.isLogin;
			},
			businessNo() {
				return this.$store.state.order.businessNo;
			},
			//是否认证下单（1.是 2.否）
			certificationOrder() {
				return this.$store.state.initData.initData.certificationOrder;
			},
			censorStatus() {
				return this.$store.state.user.censorStatus;
			}
		},
		onLoad(op) {
			this.planId = op.planId;
			this.carUrl = op.carUrl;
			this.getCarDetail();
		},
		methods: {
			getCarDetail() {
				longPlanModelInfo({
					tenantId: this.$store.state.user.tenantId,
					longPlanId: this.planId
				}).then(res => {
					this.carInfo = res.data;
					this.carInfo.labels = res.data.label.split(',');
					if (res.data.url) {
						let urls = res.data.url.split(',');
						for (let path of urls) {
							this.imglists.push(this.baseUrl + path);
						}
					}

				})
			},
			//立即预定
			goConfimOrder() {
				if (this.isLogin) {
					if (this.censorStatus == 1 && this.certificationOrder == 1) {
						this.showAuthCerAlert = true;
					} else {
						uni.navigateTo({
							url: '../order/confim-longOrder?planId=' + this.planId + '&carUrl=' + this.carUrl
						})
					}

				} else {
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}

			},
			confirmAuthCer() {
				uni.navigateTo({
					url: '../../pages/login/real_name'
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.swiperWrapper {
		height: 360upx;
		width: 100%;
	}

	.carInfoWrapper {
		margin: 20upx 22upx;
		background-color: $bg-white-color;
		border-radius: 16upx;
		padding: 40upx 28upx;

		.carBrand {
			color: $text-color-33;
			font-size: 28upx;
			font-weight: bold;
			overflow: hidden;
		}


	}

	.configWrapper {
		display: flex;
		justify-content: space-between;
		margin: 30upx 0 0;

		.configItem {

			// margin-right: 34upx;
			.title {
				color: $text-color-66;
				font-size: 22upx;
			}

			.content {
				color: $text-color-33;
				font-size: 22upx;
			}
		}
	}

	.labelWrapper {
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;

		.label {
			background-color: $main-color;
			height: 46upx;
			line-height: 46upx;
			padding: 0 18upx;
			text-align: center;
			color: $text-color-ff;
			font-size: 24upx;
			border-radius: 6upx;
			margin-right: 20upx;
			margin-top: 20upx;

		}
	}

	.basicTitle {
		color: $text-color-33;
		font-size: 26upx;
		font-weight: bold;
		margin: 20upx 22upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		position: relative;
		left: 10px;

		&:before {
			content: '';
			position: absolute;
			left: -10px;
			top: 50%;
			transform: translateY(-50%);
			margin-right: 10upx;
			height: 26upx;
			width: 8upx;
			background-color: $main-color;
			border-radius: 4px;
			opacity: .8;
		}
	}

	.basicInfoWrapper {
		background-color: $bg-white-color;
		margin: 0 22upx;
		padding: 36upx;
		border-radius: 16upx;
		color: $text-color-99;
		font-size: 24upx;

		view {
			display: inline-block;
			margin-right: 20upx;

			text {
				color: $text-color-33;
				font-size: 26upx;
			}
		}
	}

	.bottomWrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 25upx;

		.priceCalendar {
			color: $main-color;
			font-size: 30upx;
		}

		.bookBtn {
			margin: 20upx 16upx;
			background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
			border-radius: 10upx;
			color: $text-color-ff;
			font-size: 30upx;
			height: 88upx;
			width: 90%;
			line-height: 88upx;
			text-align: center;
		}
	}
</style>
